@primaryColor: #7CA982;
@darkPrimaryColor: #243E36;
@backgroundColor: #F5EDE0;
@nothing: rgba(0,0,0,0);

.scene {

  .tip-small {
    -fx-background-color: #FFF;
    -fx-font-size: 10px;
    .label{
      -fx-text-fill: @primaryColor;
    }
  }

  .tool-area {
    -fx-background-color: @backgroundColor;
    -fx-font-size: 12;
    .tool-bar {
      -fx-background-color: #FFF;
      -fx-effect: dropshadow(three-pass-box,#CCC, 6, 0, 0, 0);
      -fx-background-radius: 0px;
      .button {
        -fx-background-color: #FFF;
        -fx-text-fill: @darkPrimaryColor;
        -fx-background-radius: 0;
      }
      .button:hover {
        -fx-background-color: #FFF;
        -fx-effect: dropshadow(three-pass-box,@darkPrimaryColor, 6, 0, 0, 0);
      }
      .menu-button {
        -fx-background-color: #FFF;
        -fx-text-fill: @darkPrimaryColor;
      }
      .menu-button:hover {
        -fx-effect: dropshadow(three-pass-box,@darkPrimaryColor, 6, 0, 0, 0);
      }
    }
    .text-field{
      -fx-background-color: #FFF;
      -fx-background-radius: 0px;
      -fx-effect: dropshadow(three-pass-box,#CCC, 5, 0, 0, 0);
      -fx-border-width: 0px;
      -fx-font-size: 15px;
    }
  }
  .tab-pane {
    -fx-background-color: @nothing;
    -fx-background-radius: 8;
    -fx-tab-min-width: 100;
    .tab-label {
      -fx-text-fill: @primaryColor;
      -fx-font-size: 13;
    }
    .tab-header-background {
      -fx-background-color: @primaryColor;
    }
    .tab {
      .tab-label {
        -fx-text-fill: #FFF;
      }
      -fx-focus-color:@nothing;
      -fx-background-color: @primaryColor;
      -fx-border-width: 1px;
      -fx-border-color: #FFF;
      -fx-border-style: dashed;
    }
    .tab:selected {
      .tab-label {
        -fx-text-fill: @primaryColor;
      }
      -fx-focus-color: @nothing;
      -fx-background-color: #FFF;
    }

    .split-pane {
      .split-pane-divider{
        -fx-background-color: rgba(245,237,240, 0.8);
        -fx-padding: 0 1 0 1;
      }
      .code-area{
        -fx-font-family: "Source Han Sans CN Normal";
        -fx-font-size: 16;
        -fx-background-color: #F4F6E5;
        -fx-background-radius: 8;
        -fx-line-spacing: 6;

        .context-menu{
          -fx-font-family: "Source Han Sans CN Normal";
          .menu-item {
            -fx-font-size: 13;
            -fx-accent: @primaryColor;
          }
          .menu-item:hover *{
            -fx-text-fill: #FFF;
          }
          .menu-item:focused *{
            -fx-text-fill: #FFF;
          }
        }
        .selection {
          -fx-fill: rgba(166,215,194,1);
        }
        .paragraph-box {
          -fx-background-color: rgba(0,0,0,0);
          -fx-padding:0 0 6 0;
        }
        .lineno {
          -fx-background-color: rgba(0,0,0,0);
        }
      }
    }
  }
  .virtualized-scroll-pane {
    -fx-background-color: rgba(255,255,255,1);
  }
}
.rect-selector {
  -c-background-color: #FFF;
  -c-border-color: #999;
  -c-fill-color: rgb(208,242,179);
}
.versionsPane {
    -fx-background-color: #FFF;
    .sideArrow {
        -fx-background-color: #FFF;
        -fx-background-radius: 0 6 6 0;
        -fx-text-fill: @primaryColor;
        -fx-border-color: @primaryColor;
        -fx-border-style: solid;
        -fx-border-width: 1 1 1 0;
        -fx-border-radius: 0 6 6 0;
        &:hover {
            -fx-background-color: @primaryColor;
            -fx-text-fill: #FFF;
        }
    }
    .table-view {
        -fx-background-color: @nothing;
        -fx-border-style: dashed;
        -fx-border-width: 1.2 1 0 0;
        -fx-border-radius: 0 0 5 0;
        -fx-border-color: @primaryColor;
        -fx-focus-color: rgba(0,0,0,0);
        -fx-faint-focus-color: rgba(0,0,0,0);

        .column-header-background {
            -fx-background-color:  rgba(255,255,255,0);
            .filler {
                -fx-background-color:@primaryColor;
                -fx-background-radius: 0;
            }
        }

        .column-header {
            -fx-font-size: 14px;
            -fx-background-color: #FFF;
            -fx-border-color: @primaryColor;
            -fx-border-style: dashed;
            -fx-border-width: 0 0 1 0;
            .label {
                -fx-text-fill: @primaryColor;
            }
        }
        .table-row-cell{
            -fx-table-cell-border-color:@nothing;
            -fx-font-size: 14;
            .text {
                -fx-fill:@primaryColor;
            }
            .cell {
                -fx-alignment: center;
                .button {
                    -fx-background-color: @nothing;
                    -fx-text-fill: @primaryColor;
                    &:hover {
                        -fx-effect: dropshadow(three-pass-box, @primaryColor, 12, 0.0, 0, 3);
                    }
                }
            }

            -fx-background-color:@nothing;
            &:empty {
               -fx-text-fill:@primaryColor;
            }
            &:selected:filled {
                -fx-background-color:@primaryColor;
                .text {
                    -fx-fill:#FFF;
                }
                .cell {
                    .button {
                        -fx-text-fill:#FFF;
                    }
                }
            }

        }
    }
}


.block-editor-view {

    .selection {
        -fx-fill: rgba(166,215,194,1);
    }

    .edit-icon {
        -fx-background-color: @nothing;
        -fx-text-fill: @primaryColor;
        &:hover {
            -fx-background-color: @primaryColor;
            -fx-background-radius: 999;
            -fx-text-fill: #FFF;
        }
    }

    -fx-background-color: rgba(247,255,168,0.1);
    .list-view {
        -fx-background-color: rgba(247,255,168,0.1);
        .list-cell {
            .block-image {
                -fx-border-color: @primaryColor;
                -fx-border-style: dashed;
                -fx-border-width: 1;
                -fx-border-radius: 4;
                .button {
                    -fx-background-color: @nothing;
                    -fx-text-fill: @primaryColor;
                    -fx-border-radius: 0;
                    -fx-border-style: solid;
                    -fx-border-color: @primaryColor;
                    -fx-border-width: 2px;
                    &:hover {
                        -fx-effect: dropshadow(three-pass-box, @primaryColor, 12, 0.0, 0, 3);
                    }
                }
            }
            .text-area {
                -fx-padding: 0;
                -fx-font-size: 16;
                -fx-background-color: @nothing;
                -fx-border-color: @nothing;
                -fx-border-style: solid;
                -fx-border-width: 1;
                -fx-highlight-fill: rgba(166,215,194,1);
                .content {
                    -fx-background-color: #F4F6E5;
                }
            }
            .code-text-area {
                -fx-border-color: @primaryColor;
                -fx-border-style: dashed;
                -fx-border-width: 1;
                -fx-border-radius: 4;
            }
            .ref-text-area {
                -fx-border-color: @primaryColor;
                -fx-border-style: solid;
                -fx-border-width: 0 0 0 4;
                -fx-border-radius: 0;
            }
            .field-list {
                -fx-background-color:@nothing;
                -fx-border-color: @primaryColor;
                -fx-border-style: dashed;
                -fx-border-width: 0 0 1 0;
                -fx-highlight-fill: rgba(166,215,194,1);
            }
            .table-view {
                .table-row-cell {
                    &:selected {
                        -fx-effect:none;
                    }
                }
                .column-header {
                    -fx-border-width: 0 1 0 0;
                    -fx-border-color: @primaryColor;
                    -fx-border-style: dashed;
                }
                .text-area {
                    -fx-effect: none;
                    -fx-background-color: @nothing;
                    -fx-border-color: @nothing;
                    -fx-border-style: dashed;
                    -fx-border-width: 1;
                }
                .cell-box {
                    -fx-background-color: @nothing;
                    -fx-border-color: @primaryColor;
                    -fx-border-style: dashed;
                    -fx-border-width: 0 1 0 0;
                    &:first-child {
                        -fx-border-width: 0 0 0 1;
                    }
                }
            }
            .header-sub {
                -fx-padding:0;
                -fx-font-size: 22;
                -fx-background-color: @nothing;
                -fx-border-color: @nothing;
                -fx-border-style: solid;
                -fx-border-width: 1;
                -fx-highlight-fill: rgba(166,215,194,1);
            }
            .header-main {
                -fx-padding: 0;
                -fx-font-size: 30;
                -fx-background-color: @nothing;
                -fx-border-color: @nothing;
                -fx-border-style: solid;
                -fx-border-width: 1;
                -fx-highlight-fill: rgba(166,215,194,1);
            }
            -fx-background-color: @nothing;
        }
    }
}